<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        window.onload = function () {

            //1 获取body标签
            //var body = document.getElementsByTagName("body")[0];

            /*
             * 2 在document中有一个属性body，它保存的是body的引用
             */
            var body = document.body;
            console.log(body);

            /*
             * 3 document.documentElement保存的是html根标签
             */
            var documentElement = document.documentElement;
            console.log(documentElement);

            /*
             * 4 document.all代表页面中所有的元素
             * 这里一个问题：输出all结果时undefined
             */
            var all = document.all;
            console.log(all.length);
            //输出元素
            for(var i=0 ; i<all.length ; i++){
                console.log(all[i]);
            }
            //方法2
            all = document.getElementsByTagName("*");
            console.log(all.length);


            /*
             * 5 根据元素的class属性值查询一组元素节点对象getElementsByClassName
             * getElementsByClassName()可以根据class属性值获取一组元素节点对象，
             * 	但是该方法不支持IE8及以下的浏览器
             */
            var box1 = document.getElementsByClassName("box1");
            console.log(box1);

            //6 获取页面中的所有的div。使用getElementsByTagName
            var divs = document.getElementsByTagName("div");

            //7 获取class为box1中的所有的div
            //.box1 div
            var elementsByTagName = document.getElementById("box1").getElementsByTagName("div");
            console.log("获取class为box1中的所有的div====" + elementsByTagName);

            /*
             * 8 document.querySelector()
             * 	- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
             *
             * 	- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
             * 	- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
             *
             * css语法：
             * class 使用.
             * id 使用#
             */
            var div = document.querySelector(".box1 div");
            console.log(".box1 div======" + div.innerHTML);

            var box1 = document.querySelector(".box1")
            console.log(".box1=====" + box1.innerHTML);

            /*
             * 9 document.querySelectorAll()
             * 	- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
             * 	- 即使符合条件的元素只有一个，它也会返回数组
             */
            box1 = document.querySelectorAll(".box1");
//			NodeList(4) [div#box1.box1, div.box1, div.box1, div.box1]
            console.log(box1);
        };

    </script>
</head>
<body>
<div id="box2"></div>
<div id="box1" class="box1">
    我是第一个box1
    <div>我是box1中的div</div>
</div>
<div class="box1">
    <div>我是box1中的div</div>
</div>
<div class="box1">
    <div>我是box1中的div</div>
</div>
<div class="box1">
    <div>我是box1中的div</div>
</div>

<div></div>
</body>
</html>
